HandStack 프론트엔드 완성

웹 폰트, 커스텀 스타일, 그리고 성능 최적화 맛보기

QCN

1. 웹 폰트, 아이콘 적용하기

  • 목표: 웹 페이지의 시각적인 품질을 높여 사용성을 개선합니다.

"웹 폰트와 아이콘은 웹 페이지의 '얼굴'과 '표정'을 담당해요. 예쁜 폰트와 센스 있는 아이콘으로 우리 앱을 더 매력적으로 만들 수 있죠."

QCN

웹 폰트 적용 실습

  • Google Fonts와 같은 서비스를 이용해 원하는 글꼴을 쉽게 적용할 수 있습니다.

  • <link> 태그를 index.html에 추가하는 방법

      1. Google Fonts 사이트에서 원하는 폰트 선택
      1. <link> 코드를 복사하여 index.html 파일의 <head> 태그 안에 붙여넣기
      1. CSS 파일에서 font-family 속성으로 지정
<!-- client/index.html -->
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
</head>

/* client/src/assets/css/main.css */
body {
  font-family: 'Noto Sans KR', sans-serif;
}
QCN

아이콘 라이브러리 적용 실습

  • Font Awesome과 같은 라이브러리를 사용하면 간단한 태그로 아이콘을 표시할 수 있습니다.

  • CDN을 이용한 방법

      1. Font Awesome의 CDN 주소를 index.html에 <script> 태그로 추가합니다.
      1. 원하는 아이콘의 클래스를 <i> 태그에 적용합니다.
<!-- client/index.html -->
<head>
  ...
  <script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
</head>

<!-- 컴포넌트 템플릿 -->
<button type="button">
  <i class="fas fa-search"></i> 조회
</button>
QCN

CSS 프레임워크란?

  • 미리 정의된 CSS 클래스 모음으로, 일관성 있는 UI를 빠르게 만들 수 있도록 도와줍니다.

  • 유틸리티 우선 (Utility-First)

    • 작은 단위의 스타일 클래스를 조합하여 UI를 구성합니다. (예: Master CSS, Tailwind CSS)
    • <div class="p-4 bg-blue-100 rounded">...</div>

  • 컴포넌트 기반 (Component-Based)

    • 미리 디자인된 버튼, 카드 등의 컴포넌트를 사용합니다. (예: Bootstrap)
    • <button class="btn btn-primary">Primary Button</button>

  • HandStack에서는 Libman을 통해 이러한 프레임워크를 쉽게 설치하고 관리할 수 있습니다.

QCN

2. 나만의 테마/스타일 적용하기

  • 목표: 앱의 기본 UI에 자신만의 색상, 폰트 등을 적용하여 개성을 표현합니다.

"이제 우리 앱은 기능뿐만 아니라 '겉모습'도 여러분의 손으로 직접 만들어갈 수 있게 되었어요! 나만의 개성을 담은 앱을 만들어 보세요."

QCN

전역 스타일과 CSS 변수

  • client/src/assets/css/main.css 파일은 프로젝트 전체에 적용되는 스타일을 정의합니다.

  • CSS 변수를 사용하면 앱의 핵심 색상, 폰트 등을 한 곳에서 관리하여 테마 변경이 쉬워집니다.

  • 핸즈온

      1. main.css에 :root 를 사용하여 전역 변수 선언
      1. var(--변수명) 으로 각 요소에 색상, 폰트 등 적용
      1. 방명록 목록의 배경색, 글씨체를 바꿔보기
/* client/src/assets/css/main.css */
:root {
  --primary-color: #007bff;
  --text-color: #212529;
  --background-color: #ffffff;
  --base-font-size: 16px;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  font-size: var(--base-font-size);
}
QCN

컴포넌트 스코프 스타일

  • Vue.js는 <style scoped>를 지원하여 CSS가 해당 컴포넌트 내에서만 적용되도록 합니다.

  • 이는 다른 컴포넌트와의 스타일 충돌을 막아주어 유지보수를 쉽게 만듭니다.

  • 핸즈온

    • 방명록 컴포넌트(Guestbook.vue)에 스코프 스타일을 적용하여 디자인 변경
<!-- GuestbookItem.vue -->
<template>
  <div class="guestbook-item">...</div>
</template>

<style scoped>
/* 이 스타일은 GuestbookItem 컴포넌트 안에서만 적용됩니다. */
.guestbook-item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  border-left: 4px solid var(--primary-color);
}
</style>
QCN

3. 프론트엔드 성능 최적화 맛보기

  • 목표: 코드 번들링 개념을 이해하고 웹 페이지의 초기 로딩 속도를 개선하는 방법을 알아봅니다.

"코드 분할은 마치 대형마트에 물건을 전부 진열하지 않고, 필요한 물건만 그때그때 창고에서 가져오는 것과 같아요. 마트가 훨씬 빨리 열리고, 고객도 원하는 물건을 더 빨리 찾을 수 있죠."

QCN

코드 번들링과 분할 (Splitting)

  • 왜 성능 최적화가 중요한가?

    • 사용자 경험 향상: 로딩이 빠른 웹은 사용자의 만족도를 높입니다.
    • 검색 엔진 최적화(SEO): 로딩 속도는 검색 순위에도 영향을 미칩니다.

  • 문제점

    • 모든 JavaScript, CSS 코드를 하나의 큰 파일로 만들면 초기 로딩이 매우 느려집니다.

  • 해결책: 코드 분할 (Code Splitting)

    • 페이지(라우트)나 기능 단위로 코드를 나누어, 필요한 시점에만 해당 코드를 불러옵니다.
QCN

HandStack에서 번들링 적용하기

  • HandStack의 프론트엔드 빌드 도구는 자동으로 코드 분할을 지원합니다.

  • 배포용 빌드 시, 코드를 최적화하고 여러 개의 작은 파일(chunk)로 나누어줍니다.

  • bundling CLI 명령어를 통해 이 과정을 수동으로 실행하고 확인할 수 있습니다.

  • 핸즈온

      1. 터미널에서 npx bundling 명령어 실행
      1. dist 폴더에 생성된 최적화된 파일 확인
      1. Chrome 개발자 도구(F12)의 Network 탭에서 로딩되는 파일들을 확인
# 프로젝트 루트 디렉터리에서 실행
npx bundling
  • 위 명령을 실행하면 dist 폴더에 배포용으로 최적화된 파일들이 생성됩니다.
QCN

정리 및 다음 단계

  • 무엇을 배웠나요?

    • 웹 폰트와 아이콘으로 앱의 시각적 완성도 높이기
    • CSS 변수와 스코프 스타일로 나만의 디자인 적용하기
    • 코드 번들링을 통한 프론트엔드 성능 최적화 개념 이해하기

  • 다음 단계

    • 더 복잡하고 다양한 UI 컴포넌트 만들어보기
    • HandStack의 syn.controls.js 라이브러리 깊게 파보기
    • 본격적인 백엔드 API 연동 심화 학습

  • 여러분은 이제 기능, 디자인, 성능까지 고려하는 프론트엔드 개발의 첫걸음을 떼었습니다.

QCN